import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const NgTranscludeView = defineView({
  controller: class NgTranscludeController {
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     */
    constructor($scope) {
      $scope.title = "Lorem Ipsum";
      $scope.text = "Neque porro quisquam est qui dolorem ipsum quia dolor...";

      $scope.multiTitle = "Lorem Ipsum";
      $scope.multiLink = "https://google.com";
      $scope.multiText =
        "Neque porro quisquam est qui dolorem ipsum quia dolor...";
      $scope.$multiSlot = {};
      $scope.$multiSlot.handleClick = () => {
        console.log($scope);
      };
    }
  },
  template: /* HTML */ html`
    <label for="normal-use">normal-use</label>
    <div id="normal-use">
      <input
        type="text"
        class="form-control"
        ng-model="title"
        aria-label="title"
      />
      <br />
      <textarea
        type="text"
        class="form-control"
        ng-model="text"
        aria-label="text"
      ></textarea>
      <br />
      <eg-pane mz-title="{{ title }}">
        <span>{{ text }}</span>
      </eg-pane>
    </div>
    <hr class="m-2" />

    <label for="multi-slot">multi-slot</label>
    <div id="multi-slot">
      <a title="bad-angular">bad-angular</a>
      <input
        type="text"
        class="form-control"
        ng-model="multiTitle"
        aria-label="title"
      />
      <br />
      <textarea
        type="text"
        class="form-control"
        ng-model="multiText"
        aria-label="text"
      ></textarea>
      <br />
      <multi-slot-eg-pane>
        <eg-pane-title>
          <a ng-href="{{multiLink}}">{{multiLink}}</a>
        </eg-pane-title>
        <eg-pane-body>
          <p>{{multiText}}</p>
        </eg-pane-body>
      </multi-slot-eg-pane>
      <hr />
      ${DebugButtonHTML("$multiSlot")}
    </div>
  `,
});

export default NgTranscludeView;
// if (import.meta.webpackHot) {
//   import.meta.webpackHot.accept(
//     "./ng-transclude.mjs",
//     (outdatedDependencies) => {
//       console.log(outdatedDependencies);
//     },
//     (err, ctx) => {
//       console.error(err);
//       console.log(ctx);
//     }
//   );
// }
